<template>
    <view>
        <u-popup :show="visible" mode="bottom" round="48rpx" @close="close">
			<view class="popup-share">
				<view style="width: 100%;padding: 0 36rpx 0 16rpx;box-sizing: border-box;padding: 0 40rpx;">
					<view>
						<u-input
							placeholder="搜尋好友"
							prefixIcon="search"
							prefixIconStyle="font-size: 40rpx;color: #909399"
							shape="circle"
							style="background-color: #fff;padding: 6rpx 18rpx;"
							v-model="keyword"
						></u-input>
					</view>
				</view>
				<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 40rpx;padding: 0 40rpx;">
					<view v-for="(item,index) in userList" :key="index">
						<view>
							<view>
								<u-image
									:src="item.avatar"
									width="128"
									height="128"
									shape="circle" 
								></u-image>
							</view>
							<view>{{item.nickname}}</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 2rpx;background-color: rgb(217,217,217);margin: 40rpx 0;">
					
				</view>
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;padding: 0 40rpx;">
					<view class="share-item" @click="shareOS">
						<view class="icon-btn">
							<u-image
								src="/static/images/icon/share.svg"
								width="50"
								height="50"
							></u-image>
						</view>
						<view class="link-title">分享至</view>
					</view>
					<view class="share-item" @click="copyLink">
						<view class="icon-btn">
							<u-image
								src="/static/images/icon/copy.png"
								width="50"
								height="50"
							></u-image>
						</view>
						<view class="link-title">複製連結</view>
					</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
	import { fansUser } from '@/config/api.js';
export default {
    props: {
       
    },
    data() {
        return {
            visible: false,
            keyword: '',
			userList:[]
        };
    },
	mounted(){
		this.getFans();
	},
    methods: {
        show(){
            this.visible = true;
        },
		close(){
			this.visible = false;
		},
		getFans(){
			let that = this;
			uni.showLoading();
			
			fansUser().then((res) => {
				//success
				uni.hideLoading();
				that.userList = res;
			}).catch(() =>{
				
			})
		},
		shareOS(){
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 1,
				summary: "我正在使用Only Rent！這是一個分享測試",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		copyLink(){
			uni.setClipboardData({
				data: 'https://www.onlyrent.tw',
				success: () => {
					uni.showToast({
						icon:'none',
						title:'複製成功!'
						
					})
				},
				fail: (err) => {
					console.error('复制失败:', err)
					uni.showToast({
						icon:'none',
						title:'複製失敗:'+err
						
					})
				}
			})
			
		}
    }
};
</script>

<style lang="scss" scoped>
.popup-share{
	width: 100%;
	padding: 42rpx 0;
	
	.share-item{
		margin-right: 40rpx;
		
		.icon-btn{
			background-color: #EEF7FD;
			border-radius: 50%;
			width: 128rpx;
			height: 128rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.link-title{
			text-align: center;
		}
	}
}

</style>
